<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@page import="com.xea.service.OthersService"%>
<%@page import="com.xea.service.ServiceFactory"%>
<%@page import="com.xea.model.Others"%>
<%@page import="com.xea.service.NewsService"%>
<%@page import="com.xea.model.News"%>
<%@include file="inner/head.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<link type="text/css" rel="stylesheet" href="${basepath}/res/images/style.css" />
<script type="text/javascript" src="${basepath}/res/js/jquery.min.js"></script>
<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a.js" mce_src="js/DD_belatedPNG_0.0.8a.js"></script>
<script type="text/javascript">DD_belatedPNG.fix('.logo');DD_belatedPNG.fix('#nav_l');DD_belatedPNG.fix('#nav_r');</script>
<![endif]-->
<script type="text/javascript">
	$(function() {
		var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积）
		var len = $("#focus ul li").length; //获取焦点图个数
		var index = 0;
		var picTimer;
	
		//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
		var btn = "<div class='btnBg'></div><div class='btn'>";
		for(var i=0; i < len; i++) {
			btn += "<span></span>";
		}
		btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
		$("#focus").append(btn);
		$("#focus .btnBg").css("opacity",0.5);

		//为小按钮添加鼠标滑入事件，以显示相应的内容
		$("#focus .btn span").css("opacity",0.4).mouseenter(function() {
			index = $("#focus .btn span").index(this);
			showPics(index);
		}).eq(0).trigger("mouseenter");

		//上一页、下一页按钮透明度处理
		$("#focus .preNext").css("opacity",0.2).hover(function() {
			$(this).stop(true,false).animate({"opacity":"0.5"},300);
		},function() {
			$(this).stop(true,false).animate({"opacity":"0.2"},300);
		});
		//上一页按钮
		$("#focus .pre").click(function() {
			index -= 1;
			if(index == -1) {index = len - 1;}
			showPics(index);
		});

		//下一页按钮
		$("#focus .next").click(function() {
			index += 1;
			if(index == len) {index = 0;}
			showPics(index);
		});

		//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
		$("#focus ul").css("width",sWidth * (len));
	
		//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
		$("#focus").hover(function() {
			clearInterval(picTimer);
		},function() {
			picTimer = setInterval(function() {
				showPics(index);
				index++;
				if(index == len) {index = 0;}
			},2000); //此4000代表自动播放的间隔，单位：毫秒
		}).trigger("mouseleave");
	
		//显示图片函数，根据接收的index值显示相应的内容
		function showPics(index) { //普通切换
			var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
			$("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
			//$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果
			$("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果
		}
	}); 
</script>
</head>
<body>
<div class="bg">
<div class="container">
	<%@include file="outer/top.jsp" %>
	<div id="banner" style="height: 244px;">
		<div id="focus" style="margin-top: 20px;">
			<ul>
				<li><img src="${basepath}/res/images/banner1.jpg" alt="XEK" /></li>
				<li><img src="${basepath}/res/images/banner2.jpg" alt="XEK" /></li>
				<li><img src="${basepath}/res/images/banner3.jpg" alt="XEK" /></li>
				<li><img src="${basepath}/res/images/banner4.jpg" alt="XEK" /></li>
			</ul>
		</div>
	</div>
	<script type="text/javascript">
		var tabs={
			change:function(ItemNo,countNum,changeItemNo,channgeClass){			
				for(i=1;i<=countNum;i++){
					if(changeItemNo==i){
						this.getObject("table_"+ItemNo+i).style.display = "";
						if(channgeClass){					
							this.getObject("td_"+ItemNo+i).className = channgeClass.c1;
						}
						if(this.getObject("more_"+ItemNo)){
							this.getObject("more_"+ItemNo).href=this.getObject("td_"+ItemNo+i).morehref;
						}
					}else{
						this.getObject("table_"+ItemNo+i).style.display = "none";
						if(channgeClass){					
							this.getObject("td_"+ItemNo+i).className = channgeClass.c2;
						}
					}
				}
			},
			getObject:function(objectId){
				if(document.getElementById && document.getElementById(objectId)){
			 		return document.getElementById(objectId);
				}else if (document.all && document.all(objectId)){
					return document.all(objectId);
				}else if (document.layers && document.layers[objectId]){
					return document.layers[objectId];
				}else{
					return false;
				}
			}
		};
	</script>
	<div id="about" style="border: #cbc9ca 1px solid;">	
		<div id="about_l">
			<span class="gray">ABOUT US >></span><br />
			<table width="150" border="0" cellpadding="0" cellspacing="0" >
		  		<tr>
					<td height="25" style="cursor:pointer; padding-left:6px;" class="tabon" onmouseover="tabs.change(1,3,1,{c1:'tabon',c2:''});" id="td_11">Introduction&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
		  		</tr>
		  		<tr>
					<td height="25" style="cursor:pointer;padding-left:6px;"  onmouseover="tabs.change(1,3,2,{c1:'tabon',c2:''});" id="td_12">Culture&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
			  	</tr>
			  	<tr>
					<td height="25" style="cursor:pointer;padding-left:6px;"  onmouseover="tabs.change(1,3,3,{c1:'tabon',c2:''});" id="td_13">News&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
			  	</tr>
			</table>
			<!--
			<span style="cursor:pointer;" class="tabon" onmouseover="tabs.change(1,3,1,{c1:'tabon',c2:''});" id="td_11">Introduction&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
			<span style="cursor:pointer;"  onmouseover="tabs.change(1,3,2,{c1:'tabon',c2:''});" id="td_12">Culture&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
			<span style="cursor:pointer;"  onmouseover="tabs.change(1,3,3,{c1:'tabon',c2:''});" id="td_13">News&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><br />-->
		</div>
		<div id="about_r">
			<span style="display:block" id="table_11" ><p>
				<%
					OthersService othersDao = ServiceFactory.getOthersService();
					Others others=othersDao.findByIdPub(1);
					if(others!=null){
						if(others.getContent().length() >=1000)
							others.setContent(others.getContent().substring(0,1000)+"...");
				 	%>	<%=others.getContent() %>
        	  	<a href="${basepath}/outer/about.jsp" class="red" target="_blank"> more>></a>
        		<%} %></p>
        	</span>
			<span style="display:none" id="table_12"><p>
				<%
					others=othersDao.findByIdPub(2);
					if(others!=null){
					if(others.getContent().length() >=1000)
						others.setContent(others.getContent().substring(0,1000)+"...");
				 %>	<%=others.getContent() %>
        	  	<a href="${basepath}/outer/others/culture.jsp" class="red" target="_blank"> more>></a>
        		<%} %></p>
        	</span>
			<span style="display:none" id="table_13">
				<%
					NewsService newsDao = ServiceFactory.getNewsService();
					List list=newsDao.searchTop();
					for(int i=0;i<list.size();i++){
						News news = (News)list.get(i);
				%>	
				<p style="height: 26px;">
				<img src="${basepath}/res/image/trt_poi.gif" height="4" width="5" complete="complete">&nbsp;
				<a href="${basepath}/outer/news/detail.jsp?id=<%=news.getId() %>" style="color: #4a4a4a;" onmousemove="$(this).css('color', 'red');" onmouseout="$(this).css('color', '#4a4a4a');"  title="<%=news.getTitle() %>" target="_blank" ><%=news.getTitle() %></a> 
				<font style="margin-left: 30px;">(<%=news.getCreateDate() %>)</font></p>
				<%}%>
				<%if(list.size()!=0){%>
				<p align="right" style="margin-right: 50px;">
					<a href="${basepath}/outer/news/index.jsp" class="red" target="_blank"> more>></a>
				</p>
				<%}  %>
			</span>
		</div>
		<div class="clr"></div>
	</div>
	<div id="product" style="margin-bottom: 0px;">
		<table border="0" cellspacing="0" cellpadding="0" width="948">
	  		<tr>
				<td>
					<div class="variety">
						<div class="pic"><img src="${basepath}/res/images/pic01.jpg" width="222" height="248" alt="Wood Furniture" style="cursor: pointer;" title="Wood Furniture"/></div>
						<div class="button"><a href="${basepath}/outer/product.jsp?type=search&name='Wood Furniture'" target="_blank"><img src="${basepath}/res/images/button01.jpg" width="195" height="66" /></a></div>
					</div>
				</td>
				<td>
					<div class="variety">
						<div class="pic"><img src="${basepath}/res/images/pic02.jpg" width="222" height="248" alt="Metal Furniture" style="cursor: pointer;" title="Metal Furniture"/></div>
						<div class="button"><a href="${basepath}/outer/product.jsp?type=search&name='Metal Furniture'" target="_blank"><img src="${basepath}/res/images/button02.jpg" width="195" height="66" /></a></div>
					</div>
				</td>
				<td>
					<div class="variety">
						<div class="pic"><img src="${basepath}/res/images/pic03.jpg" width="222" height="248" alt="Sofa" style="cursor: pointer;" title="Sofa"/></div>
						<div class="button"><a href="${basepath}/outer/product.jsp?type=search&name='Sofa'" target="_blank"><img src="${basepath}/res/images/button03.jpg" width="195" height="66" /></a></div>
					</div>
				</td>	  			
				<td>
					<div class="variety">
						<div class="pic"><img src="${basepath}/res/images/pic04.jpg" width="222" height="248" alt="Outdoor Furniture" style="cursor: pointer;" title="Outdoor Furniture"/></div>
						<div class="button"><a href="${basepath}/outer/product.jsp?type=search&name='Outdoor Furniture'" target="_blank"><img src="${basepath}/res/images/button04.jpg" width="195" height="66" /></a></div>
					</div>
				</td>
	  		</tr>
		</table>
	</div>
	<div style="border: #d6d5d3 1px solid;background-color: #ffffff;height: 50px;margin-bottom: 20px;">
		<table border="0" cellspacing="0" cellpadding="0" width="948" style="margin-top: 10px;">
			<tr height="40px;">
				<td style="background:url('res/images/msn.gif') no-repeat;width: 237px;background-position: 60px center;" align="center"><a  href="msnim:chat?contact=sally1981cn@163.com" target="_blank"  style="font-size: 12px;color: #353535;margin-left: 40px;">online service</a></td>
				<td style="background:url('res/images/skype.png') no-repeat;width: 237px;background-position: 60px center;" align="center"><a href="skype:kelly_suxiaoyun-SKYPE?call" target="_blank"  style="font-size: 12px;color: #353535;margin-left: 40px;">Talk with us</a></td>
				<td style="background:url('res/images/alibaba.png') no-repeat;width: 237px;background-position: 40px center;" align="center"><a href="http://amos.us.alitalk.alibaba.com/msg.aw?v=2&uid=xmkelly&site=enaliint&s=5" target="_blank" style="font-size: 12px;color: #353535;margin-left: 40px;">XEK on Alibaba.com</a></td>
				<td style="background:url('res/images/email.png') no-repeat;width: 237px;background-position: 40px center;" align="center"><a href="mailTo:kelly@xekfurniture.com" target="_blank" style="font-size: 12px;color: #353535;margin-left: 40px;" target="_blank" >kelly@xekfurniture.com</a></td>
			</tr>
		</table>
	</div>
	<%@include file="outer/tail.jsp" %>
</div>
</div>
</body>
